<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <ft-pagination :total="totalPage" :current-page="pageIndex" :page-size="pageSize" @pageChange="load">
    <div slot="toolbar" style="text-align:left">
      <ft-advanced-query title="请输入客户名称进行搜索" @packup="packup" @load="search"></ft-advanced-query>
    </div>
    <el-row v-if="showQueryPanel">
      <!--高级查询-->
      <transfer-customer-query-form @query="search" @change="queryChange"></transfer-customer-query-form>
    </el-row>
    <el-table :data="customerTransferSelectList"
              style="width: 100%;margin:0px auto; text-align:left"
              tooltip-effect="light"
              class="tableClass"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="customerName" label="客户名称" min-width="120" align="left">
      </el-table-column>
      <el-table-column label="客户类型" align="left" min-width="120">
        <template slot-scope="scope">
          <ft-enum-select v-model="scope.row.customerType"
                          service-name="lss-customer"
                          type-name="customerType"
                          :editing="false">
          </ft-enum-select>
        </template>
      </el-table-column>
      <el-table-column prop="mainManagerName" label="移交前主办" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="viceManagerName" label="移交前协办" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="deptName" show-overflow-tooltip  label="移交前部门" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="identityNo" label="证件号码" align="left" min-width="120">
      </el-table-column>
      <el-table-column prop="creationTs" label="建户日期" align="left" min-width="120">
        <template slot-scope="scope">
          {{changeDate(scope.row.creationTs)}}
        </template>
      </el-table-column>
    </el-table>
  </ft-pagination>
</template>

<script>
  import TransferCustomerQueryForm from "./TransferCustomerQueryForm";
  export default {
    components: {TransferCustomerQueryForm},
    props: [
      'customerTransferId',
    ],

    data() {
      return {
        name: "TransferCustomerSelectList",
        customerTransferSelectList:[],
        currentPage: 1,
        pageSize: 8,
        pageIndex: 1,
        totalPage: 0,
        options: [{
          value: 'customerName',
          label: '客户名称'
        }],
        selectText: '',
        selectValue: '',
        filter: '',
        multipleSelection:[],
        queryTerms:{
          filterType: '',
          filterValue: '',
          customerTransferId: '',
          pageSize: 8,
          pageIndex: 1,
        },
        showQueryPanel: false,
        querParam: {},
      }
    },
    methods: {
      packup(showQueryPanel) {
        this.showQueryPanel = showQueryPanel
      },
      search(querParam) {
        querParam.initQuery = false
        this.querParam = querParam
        this.currentPage = 1
        this.load(this.currentPage, this.pageSize)
      },
      queryChange(querParam) {
        querParam.initQuery = false
        this.querParam = querParam
        this.currentPage = 1
      },
      load(pageIndex, pageSize){
        this.currentPage = pageIndex
        this.pageSize = pageSize
        this.queryTerms.pageIndex = this.pageIndex
        this.queryTerms.pageSize = this.pageSize
        this.queryTerms.filterType = this.selectValue
        this.queryTerms.filterValue = this.selectText
        this.queryTerms.customerTransferId = this.customerTransferId
         console.log(JSON.stringify(this.querParam))
        this.$http.post('/joys-rest/lss-customer/transfer/customer/detail',
          this.querParam,  {
            params: {
              customerTransferId: this.customerTransferId,
              pageIndex: this.currentPage,
              pageSize: this.pageSize,
            }
          }
          ).then(resp => {
          this.customerTransferSelectList= resp.body.rows
          this.totalPage = resp.body.total
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.$emit('returnValue', {multipleSelection: this.multipleSelection})
      },
      valueChanged(){
        this.selectValue = value
      },
      changeDate(val){
        if (val!=null){
          return new Date(val).Format("yyyy-MM-dd")
        }
  }
    }
  }
</script>

<style scoped>
  .el-input--small .el-input__inner{
    border-radius: 16px;
  }

</style>
